<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<div>
				<label>Id:<input type="text" v-model="id"></label>
				<label>Name:<input type="text" v-model="name"></label>
				
				<input type="button" value="添加" @click="add" />
			</div>
			
			<!--
				说明：
				1.key在使用时，必须使用v-bind属性绑定的形式，指定key的值,
				2.在使用v-for时，如果v-for有问题，必须使用v-for的同时，指定
					唯一的 字符串/数字 类型 :key 值
			-->
			<p v-for="item in list" :key="item.id">
				<input type="checkbox" /> {{item.id}}--{{item.name}}
			</p>
			
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				id:'',
				name:'',
				list:[
					{id:1,name:'嬴政'},
					{id:2,name:'赵高'},
					{id:3,name:'李斯'},
					{id:4,name:'扶苏'},
					{id:5,name:'胡亥'}
				]
			},
			methods:{
				add(){
					this.list.unshift({id:this.id,name:this.name})
				}
			}
		});
	</script>
</html>